<script setup>

import {ref} from 'vue'
import pageofficeCtrlUtil from "@/plugins/pageoffice/pageoffice-word-excel.js";
import PageOfficeFile from "@/components/PageOfficeFile/index.vue";
import {getDocMyRedSheetMainFileInfo} from "@/api/document/mainFile.js";
import SelectTemplateList from "@/views/common/selectTemplateList.vue";
import {getDocMyRedSheetTemplatePageList, redSheetAutoFill} from "@/api/document/myDocument.js";

const {proxy} = getCurrentInstance()
const poHtml = ref('')
let docId = undefined
const isEdit = ref(false)
const templateListOpen = ref(false)
const isSelectedTemplate = ref(false)
//组装控件所需的自定义按钮的参数,
// 数组的第一个元素： 按钮的标题（如果设置为 "-"，表示此按钮是分隔线）；第二个元素： 点击当前按钮时触发的 JavaScript 函数名；第一个元素： 按钮图标的索引；
//组装PageOfficeCtrl控件所需的自定义按钮参数
const customButtonsForPO = [
  ["保存", "save", 1],
  ["另存", "saveAsFile", 11],
  ["套红", "selectRedTemplate", 5],
  ["-", "", 0]
]

onMounted(() => {
  //获取pageoffice客户端传过来的参数
  docId = JSON.parse(pageofficectrl.WindowParams)
  getFile()
})

function getFile() {
  getDocMyRedSheetMainFileInfo(docId).then(result => {
    poHtml.value = result.html
    isEdit.value = result.isEdit
    //挂载PageOfficeCtrl 或 PDFCtrl控件需要调用的函数，例如控件触发的事件、自定义按钮触发的函数等。
    if (!result.isPdf) {
      pageofficeCtrlUtil.jsFunctionMounted(customJSFunctions, customButtonsForPO)
    }
  })
}

const saveDocument = () => {
  //保存正文
  pageofficectrl.SaveFilePage = '/doc/my/updateRedSheetFile/' + docId
  //执行保存
  pageofficectrl.WebSave()
  //正文首页保存为图片
  pageofficectrl.SaveFilePage = '/doc/my/updateMainImage/' + docId
  pageofficectrl.WebSaveAsImage()
  //服务端返回保存结果
  const customSaveResult = pageofficectrl.CustomSaveResult
  if (customSaveResult === 'ok') {
    pageofficeCtrlUtil.msgSuccess('保存成功')
  }
}

const customJSFunctions = {
  //控件初始化事件，函数名是指定的，不可修改，此处根据实际情况重写OnPageOfficeCtrlInit事件代码
  OnPageOfficeCtrlInit: () => {
    // 添加自定义按钮
    pageofficeCtrlUtil.addCustomButtons(isEdit.value ? customButtonsForPO : null)
  },
  AfterDocumentOpened: () => {
    //不启用修订
    pageofficectrl.word.SetTrackRevisions(false)
    if (isSelectedTemplate.value) {
      saveDocument()
    }
  },
  //部分自定义按钮执行的js函数
  save: saveDocument,
  selectRedTemplate: () => {
    openTemplateDialog()
  }
}

function openTemplateDialog() {
  pageofficectrl.Enabled = false
  templateListOpen.value = true
}

const closeTemplateDialog = () => {
  pageofficectrl.Enabled = true
  templateListOpen.value = false
}

function getTemplateList(queryParams, callback) {
  getDocMyRedSheetTemplatePageList(queryParams).then(res => {
    res.dialogTitle = '选择套红模板'
    callback(res)
  })
}

function handleSelectedTemplate(template) {
  proxy.$modal.confirm('选择或更换模板套红后正文部分将自动还原为清稿后的正文内容，确认要选择或更换当前模板？').then(() => {
    proxy.$modal.loading('正在执行，请稍后...')
    return changeTemplate(template)
  }).then(() => {
    proxy.$modal.closeLoading()
  }).catch(() => {
    proxy.$modal.closeLoading()
  })
}

function changeTemplate(template) {
  templateListOpen.value = false
  pageofficectrl.Enabled = true
  let params = {id: docId, templateId: template.id}
  redSheetAutoFill(params).then(result => {
    poHtml.value = result.html
    isSelectedTemplate.value = true
    pageofficectrl.Reload()
  })
}

</script>

<template>
  <SelectTemplateList
      :is-open="templateListOpen"
      @getTemplateList="getTemplateList"
      @handleSelectedTemplate="handleSelectedTemplate"
      @close="closeTemplateDialog"
      templateType="docMyRedSheetTemplate"/>

  <PageOfficeFile :poHtml="poHtml"/>
</template>

